<template>
	<view class="distribution-centre-color" :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">邀好友赚奖金</block>
		</cu-custom>
		<view class="banner">
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/banner1.1.png?x-oss-process=image/resize,m_fill,h_200,w_750"
			 mode=""></image>
		</view>
		<view class="drstr-title" v-if="needShareGoods.length>0">
			<view class="tit">
				<text>{{busName}}</text>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/corner1.png?x-oss-process=image/resize,m_fill,h_30,w_30"
				 mode=""></image>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/corner1.png?x-oss-process=image/resize,m_fill,h_30,w_30"
				 mode=""></image>
			</view>
			<text class="read-more" @click="nav" :data-url="industryId==6?`/pages/scenicDetail?busId=${busId}`:`/pages/generalDetail?busId=${busId}`">查看更多</text>
		</view>
		<view class="goods-list" v-if="needShareGoods.length>0">
			<view class="goods-item" v-for="(item,index) in needShareGoods" :key="index" @click="nav" :data-url="`/pages/shopsGoodShare?scene=${item.id}`">
				<image :src="`${item.image}?x-oss-process=image/resize,m_fill,h_220,w_220`" mode=""></image>
				<view class="">
					<view>{{item.product_name}}</view>
					<view class="">
						已售{{item.sales==0?'1':item.sales}}件
					</view>
					<view class="">
						<view class="">
							<text class="text-price text-colorP" v-if="item.price>0">{{item.price}}</text>
							<text class="text-colorP" v-if="item.integral>0 && item.price>0">+</text>
							<text class="text-colorP" v-if="item.integral>0">{{item.integral}}</text>
							<text class="text-colorP" v-if="item.integral>0">积分</text>
							<text class="text-price text-gray">{{item.ot_price}}</text>
						</view>
						<view class="">
							<text>邀好友赚</text>
							<text>{{item.max_money}}元</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="drstr-title" v-if="newActivityList.length>0">
			<view class="tit">
				<text>经典单品</text>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/corner1.png?x-oss-process=image/resize,m_fill,h_30,w_30"
				 mode=""></image>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/corner1.png?x-oss-process=image/resize,m_fill,h_30,w_30"
				 mode=""></image>
			</view>
			<text class="read-more" @click="nav" :data-url="`/pages/shopList/shareTravel?types=thisOne`">查看更多</text>
		</view>
		<view class="hot-shops goods-list" v-if="newActivityList.length>0" style="padding: 0;">
			<swiper @change="hotSwiperChange" :style="[{height: hotHeight}]">
				<swiper-item v-for="(shopItem,zIndex) in newActivityList" :key="zIndex">
					<!-- <view class="tui-extend-item" v-for="(item,index) in shopItem" :key="index" @click="nav" :data-url="`/pages/shopsGoodShare?scene=${item.id}`">
						<image class="image" :src="item.image+'?x-oss-process=image/resize,m_fill,h_280,w_340'" lazy-load mode=""></image>
						<view class="info">
							<view>{{item.product_name}}</view>
							<view class="">
								<view class="">
									<text class="text-price text-colorP" v-if="item.price>0">{{item.price}}</text>
									<text class="text-colorP" v-if="item.integral>0 && item.price>0">+</text>
									<text class="text-colorP" v-if="item.integral>0">{{item.integral}}</text>
									<text class="text-colorP" v-if="item.integral>0">积分</text>
									<text class="text-price text-gray">{{item.ot_price}}</text>
								</view>
								<view class="">
									<view class="">
										<text>邀好友赚</text>
										<text>{{item.max_money}}元</text>
									</view>
								</view>
							</view>
						</view>
					</view> -->
					<view class="goods-item" v-for="(item,index) in shopItem" :key="index" @click="nav" :data-url="`/pages/shopsGoodShare?scene=${item.id}`">
						<image :src="`${item.image}?x-oss-process=image/resize,m_fill,h_220,w_220`" mode=""></image>
						<view class="">
							<view>{{item.product_name}}</view>
							<view class="">
								已售{{item.sales==0?'1':item.sales}}件
							</view>
							<view class="">
								<view class="">
									<text class="text-price text-colorP" v-if="item.price>0">{{item.price}}</text>
									<text class="text-colorP" v-if="item.integral>0 && item.price>0">+</text>
									<text class="text-colorP" v-if="item.integral>0">{{item.integral}}</text>
									<text class="text-colorP" v-if="item.integral>0">积分</text>
									<text class="text-price text-gray">{{item.ot_price}}</text>
								</view>
								<view class="">
									<text>邀好友赚</text>
									<text>{{item.max_money}}元</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view class="rollingBar hotBar">
				<view style="flex:1"></view>
				<block v-for="(item,index) in newActivityList" :key="index">
					<view class="tab-bar" :class="hotIndex==index?'active':''"></view>
				</block>
				<view style="flex:1"></view>
			</view>
		</view>
		<view class="drstr-title" v-if='comboList.length>0'>
			<view class="tit">
				<text>套餐权益</text>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/corner1.png?x-oss-process=image/resize,m_fill,h_30,w_30"
				 mode=""></image>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/corner1.png?x-oss-process=image/resize,m_fill,h_30,w_30"
				 mode=""></image>
			</view>
			<text class="read-more" @click="nav" :data-url="`/pages/shopList/shareTravel?types=combo`">查看更多</text>
		</view>
		<view class="set-mall" v-if='comboList.length>0'>
			<view class="set-item" v-for="(item,index) in comboList" :key="index" @click="nav" :data-url="`/pages/shopsGoodShare?scene=${item.id}&type=combo`">
				<view class="top">
					<view>{{item.name}}</view>
					<view class="">
						<view class="">
							<text class="text-price text-colorP" v-if="item.price>0">{{item.price}}</text>
							<text class="text-colorP" v-if="item.integral>0 && item.price>0">+</text>
							<text class="text-colorP" v-if="item.integral>0">{{item.integral}}</text>
							<text class="text-colorP" v-if="item.integral>0">积分</text>
							<text class="text-price text-gray">{{item.ot_price}}</text>
						</view>
						<view class="">
							邀好友赚{{item.max_money}}元
						</view>
					</view>
				</view>
				<view class="bottom" v-if="item.product.length>0">
					<view class="bottom-item" v-for="(pro,p) in item.product" :key="p">
						<image :src="pro.image+'?x-oss-process=image/resize,m_fill,h_140,w_140'" mode=""></image>
						<view class="text-cut">{{pro.product_name}}</view>
						<view class="">
							<text class='text-price text-colorP'>123</text>
							<text class="">x20份</text>
						</view>
						<text class="left-radius"></text>
						<text class="right-radius"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="drstr-title">
			<view class="tit">
				<text>为你推荐</text>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/corner1.png?x-oss-process=image/resize,m_fill,h_30,w_30"
				 mode=""></image>
				<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/corner1.png?x-oss-process=image/resize,m_fill,h_30,w_30"
				 mode=""></image>
			</view>
		</view>
		<view class="region-cont">
			<view class="regin-item" @click="checkRegion('visitsFilter')">
				<view :class="visitsFilter!=''?'active':''">
					访问量
				</view>
				<view class="">
					<image v-if="visitsFilter && visitsFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/on-the-Angle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!visitsFilter || visitsFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-upward.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="visitsFilter && visitsFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/suboccipital-triangle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!visitsFilter || visitsFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-down.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
				</view>
			</view>
			<view class="regin-item" @click="checkRegion('bountyFilter')">
				<view :class="bountyFilter!=''?'active':''">
					奖励金
				</view>
				<view class="">
					<image v-if="bountyFilter && bountyFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/on-the-Angle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!bountyFilter || bountyFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-upward.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="bountyFilter && bountyFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/suboccipital-triangle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!bountyFilter || bountyFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-down.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
				</view>
			</view>
			<view class="regin-item" @click="checkRegion('saleFilter')">
				<view :class="saleFilter!=''?'active':''">
					销量
				</view>
				<view class="">
					<image v-if="saleFilter && saleFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/on-the-Angle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!saleFilter || saleFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-upward.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="saleFilter && saleFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/suboccipital-triangle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!saleFilter || saleFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-down.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
				</view>
			</view>
			<view class="regin-item" @click="checkRegion('tariffFilter')">
				<view :class="tariffFilter!=''?'active':''">
					价格
				</view>
				<view class="">
					<image v-if="tariffFilter && tariffFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/on-the-Angle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!tariffFilter || tariffFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-upward.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="tariffFilter && tariffFilter==1" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/suboccipital-triangle.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
					<image v-if="!tariffFilter || tariffFilter==2" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/default-down.png?x-oss-process=image/resize,m_fill,h_8,w_16"
					 mode=""></image>
				</view>
			</view>
		</view>
		<view class="goods-list bottom-goods-list">
			<view class="goods-item" v-for="(item,index) in allBottomList" :key="index" @click="nav" :data-url="`/pages/shopsGoodShare?scene=${item.id}`">
				<image :src="`${item.image}?x-oss-process=image/resize,m_fill,h_220,w_220`" mode=""></image>
				<view class="">
					<view>{{item.product_name}}</view>
					<view class="">
						已售{{item.sales==0?'1':item.sales}}件
					</view>
					<view class="">
						<view class="">
							<text class="text-price text-colorP" v-if="item.price>0">{{item.price}}</text>
							<text class="text-colorP" v-if="item.integral>0 && item.price>0">+</text>
							<text class="text-colorP" v-if="item.integral>0">{{item.integral}}</text>
							<text class="text-colorP" v-if="item.integral>0">积分</text>
							<text class="text-price text-gray">{{item.ot_price}}</text>
						</view>
						<view class="">
							<text>邀好友赚</text>
							<text>{{item.max_money}}元</text>
						</view>
					</view>
				</view>
			</view>
			<tui-divider width="60%" :gradual="true" v-if="noMore">没有更多了</tui-divider>
			<no-content :showType="'search'" v-if='noContentShow' :tips="'暂时没有此类商品~'"></no-content>
		</view>
	</view>
</template>

<script>
	import noContent from './component/noContent.vue'
	export default {
		components: {
			noContent
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				newActivityList: [],
				hotIndex: 0,
				hotHeight: 0,
				region: [],
				regionIndex: -1,
				allBottomList: [],
				nowTypeId: '',
				page: 1,
				lastPage: '',
				noMore: false,
				noContentShow: false,
				comboList: [],
				cityName: '',
				needShareGoods: [],
				busId: '',
				busName: '',
				industryId: '',


				// 筛选
				visitsFilter: '',
				bountyFilter: '',
				saleFilter: '',
				tariffFilter: ''
			}
		},
		onLoad(options) {
			if (!uni.getStorageSync('coordinate')) {
				uni.navigateTo({
					url: '/pages/selectCity?currentCity=' + (this.cityName ? this.cityName : '西安市')
				})
			} else {
				this.getTour()
				this.getAll()
				this.getTypes()
				this.getCombo()
				if (options.busId) {
					this.busId = options.busId
					this.getTopGoods()
				}
			}
		},
		onShow() {
			// 重新定位后重新获取数据
			if (uni.getStorageSync('isChangeCoordinate')) {
				this.getTour()
				this.getAll()
				this.getTypes()
				this.getCombo()
				this.getTopGoods()
				uni.removeStorageSync('isChangeCoordinate')
			}
		},
		onReachBottom() {
			if (!this.lastPage) return
			if (this.page > this.lastPage && this.allBottomList.length > 0) {
				this.noMore = true
				return
			}
			this.getAll()
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		methods: {
			checkRegion(region){
				if(!this[region] || this[region]==1){
					this[region] = 2
				}else if(this[region]==2){
					 this[region]=1
				}
				this.page = 1
				this.lastPage = ''
				this.allBottomList = []
				this.noContentShow = false
				this.noMore = false
				this.getAll()
			},
			getTopGoods() {
				var that = this;
				this.$request({
					url: '/product/get_distribution_product',
					data: {
						business_id: that.busId
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.length > 0) {
								that.busName = res.data.data[0].b_name
								that.industryId = res.data.data[0].industry_id
								if (res.data.data.length > 3) {
									res.data.data.length = 3
								}
							}
							that.needShareGoods = res.data.data
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 跳转
			nav(e) {
				// 处理连锁商家的方法
				var url = e.currentTarget.dataset.url
				if (url) {
					uni.navigateTo({
						url: url,
						fail() {
							uni.switchTab({
								url: url
							})
						}
					})
				}
			},
			getCombo() {
				var me = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/Combo/get_combo_list',
					methods: 'GET',
					data: {
						page: 1,
						latitude: coordinate.latitude,
						longitude: coordinate.longitude,
					},
					success: res => {
						if (res.data.status == 1) {
							me.comboList = res.data.data.product_data
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getTypes() {
				var me = this;
				this.$request({
					url: '/Product/get_order_type',
					methods: 'GET',
					success: res => {
						if (res.data.status == 1) {
							me.region = res.data.data
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getAll() {
				var me = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/Product/get_distribution_product_order',
					methods: 'GET',
					data: {
						page: me.page,
						latitude: coordinate.latitude,
						longitude: coordinate.longitude,
						order_type: me.nowTypeId,
						visit: me.visitsFilter?(me.visitsFilter==1?'visit_desc':'visit_asc'):'',
						cash: me.bountyFilter?(me.bountyFilter==1?'cash_desc':'cash_asc'):'',
						sales: me.saleFilter?(me.saleFilter==1?'sales_desc':'sales_asc'):'',
						price: me.tariffFilter?(me.tariffFilter==1?'price_desc':'price_asc'):''
					},
					success: res => {
						if (res.data.status == 1) {
							var list = res.data.data.product_data
							if (res.data.data.totalNum == 0) {
								me.noContentShow = true
								return
							}
							if (list.length > 0) {
								me.allBottomList = me.allBottomList.concat(list)
								me.page++
								me.lastPage = res.data.data.pageCount
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			getTour() {
				var me = this;
				var coordinate = uni.getStorageSync('coordinate')
				this.$request({
					url: '/Product/get_distribution_product_order',
					methods: 'POST',
					data: {
						industry_id: 6,
						page: 1,
						latitude: coordinate.latitude,
						longitude: coordinate.longitude
					},
					success: res => {
						if (res.data.status == 1) {
							var thisData = res.data.data.product_data
							if (res.data.data.totalNum > 0) {
								if (thisData.length % 2 == 1) {
									thisData.length = thisData.length - 1
								}
								me.newActivityList = me.SplitArray(4, thisData)
								me.hotHeight = (me.newActivityList[0].length * 280) + 'rpx'
							} else {
								me.newActivityList = []
							}
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			hotSwiperChange(e) {
				var len = this.newActivityList[e.detail.current].length
				this.hotIndex = e.detail.current
				this.hotHeight = (len * 280) + 'rpx'
				console.log(this.hotHeight)
			},
			// 数组格式化
			SplitArray(N, Q) {
				var R = [],
					F;
				for (F = 0; F < Q.length;) R.push(Q.slice(F, F += N))
				return R
			},
		}
	}
</script>


<style scoped>
	.banner {
		width: 100%;
		height: 200rpx;
	}

	.banner image {
		width: 100%;
		height: 100%;
	}

	.drstr-title {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.read-more {
		color: #fff;
		font-size: 24rpx;
		position: absolute;
		right: 24rpx;
		bottom: 30rpx;
	}

	.drstr-title .tit {
		/* width: 260rpx; */
		height: 30rpx;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.drstr-title .tit text {
		font-size: 32rpx;
		color: #fff;
		font-weight: bold;
		padding: 0 50rpx;
	}

	.drstr-title .tit>image {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		bottom: 0;
	}

	.drstr-title .tit>image:nth-child(2) {
		left: 0
	}

	.drstr-title .tit>image:nth-child(3) {
		right: 0;
		transform: rotate(-90deg);
	}

	.hot-shops {
		width: 100%;
		/* background: #fff; */
		position: relative;
	}

	.hot-shops swiper {
		width: 100%;
		transition: all .5s;
	}

	.hot-shops swiper swiper-item {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 24rpx;
		box-sizing: border-box;
		/* background: #fff; */
	}

	.tui-extend-item {
		width: 340rpx;
		height: 470rpx;
		margin-bottom: 10rpx;
		box-sizing: border-box;
	}

	.tui-extend-item image {
		width: 340rpx;
		height: 280rpx;
		border-radius: 10rpx;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(153, 153, 153, 0.4);
	}

	.tui-extend-item .info {
		height: 180rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 10rpx;
		box-sizing: border-box;
	}

	.tui-extend-item .info>view:nth-child(1) {
		font-size: 28rpx;
		color: #333333;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-width: 320rpx;
		font-weight: bold;
	}

	.tui-extend-item .info>view:nth-child(2)>view>text {
		font-weight: bold;
	}

	.tui-extend-item .info>view:nth-child(2)>view:nth-child(1)>text:last-child {
		text-decoration: line-through;
		margin-left: 10rpx;
		font-weight: normal;
		font-size: 24rpx
	}

	.tui-extend-item .info>view:nth-child(2)>view:nth-child(2) {
		display: inline-block;
		height: 32rpx;
		border-radius: 4rpx;
	}

	.tui-extend-item .info>view:nth-child(2)>view:nth-child(2)>view:nth-child(1) {
		border: solid 1rpx #f34930;
		background-color: #ffffff;
		border-radius: 4rpx;
		height: 100%;
		margin-top: 10rpx;
		display: flex;

	}

	.tui-extend-item .info>view:nth-child(2)>view:nth-child(2)>view:nth-child(1)>text:nth-child(1) {
		display: inline-block;
		width: 100rpx;
		height: 100%;
		background-color: #f34930;
		border-radius: 4rpx 0rpx 0rpx 4rpx;
		font-size: 20rpx;
		color: #ffffff;
		text-align: center;
	}

	.tui-extend-item .info>view:nth-child(2)>view:nth-child(2)>view:nth-child(1)>text:nth-child(2) {
		padding: 0 10rpx;
		line-height: 32rpx;
		color: #f34930;
		font-size: 20rpx;
	}

	.rollingBar {
		width: 100%;
		position: absolute;
		bottom: 35rpx;
		left: 0;
		display: flex !important;
		align-items: center;
	}

	.rollingBar .tab-bar {
		width: 10rpx;
		height: 10rpx;
		background-color: #fff;
		opacity: 0.7;
		border-radius: 100%;
		margin-right: 20rpx;
		transition: all 0.2s;
	}

	.hotBar {
		bottom: 0 !important
	}

	.hotBar .tab-bar {
		opacity: 1;
		width: 36rpx !important;
		height: 8rpx !important;
		border-radius: 8rpx !important;
		background-color: #efefef !important;
	}

	.hotBar .tab-bar.active {
		background-color: #f34930 !important;
	}

	.rollingBar .tab-bar:last-child {
		margin-right: 0;
	}

	.rollingBar .tab-bar.active {
		width: 40rpx;
		opacity: 1;
		border-radius: 50rpx;
	}

	.set-mall {
		width: 100%;
		padding: 0 24rpx;
	}

	.set-mall .set-item:last-child {
		margin-bottom: 0;
	}

	.set-item {
		width: 100%;
		/* height: 483rpx; */
		padding: 0 20rpx;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		box-shadow: 0rpx 4rpx 10rpx 0rpx rgba(153, 153, 153, 0.4);
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}

	.set-item .top {
		width: 100%;
		height: 178rpx;
		padding: 20rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		border-bottom: solid 1rpx #efefef;
	}

	.set-item .top>view:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 660rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.set-item .top>view:nth-child(2) {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.set-item .top>view:nth-child(2)>view:nth-child(1)>text {
		font-weight: bold;
	}

	.set-item .top>view:nth-child(2)>view:nth-child(1)>text:last-child {
		text-decoration: line-through;
		margin-left: 10rpx;
		font-weight: normal;
		font-size: 24rpx
	}

	.set-item .top>view:nth-child(2)>view:nth-child(2) {
		height: 48rpx;
		padding: 0 10rpx;
		background-image: linear-gradient(90deg,
			#f8990b 0%,
			#f34930 100%);
		border-radius: 10rpx;
		color: #ffffff;
		line-height: 48rpx;
		font-size: 28rpx;
	}

	.set-item .bottom {
		width: 100%;
		padding: 20rpx 0;
		display: flex;
		/* justify-content: space-between; */
		align-items: center;
	}

	.set-item .bottom .bottom-item {
		width: 214rpx;
		height: 264rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #fef5e6;
		border-radius: 4rpx;
		position: relative;
		margin-right: 10rpx;
	}

	.set-item .bottom .bottom-item:last-child {
		margin-right: 0 !important;
	}

	.set-item .bottom .bottom-item .left-radius {
		position: absolute;
		bottom: 50rpx;
		left: -8rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 100%;
		background: #fff;
	}

	.set-item .bottom .bottom-item .right-radius {
		position: absolute;
		bottom: 50rpx;
		right: -8rpx;
		width: 16rpx;
		height: 16rpx;
		border-radius: 100%;
		background: #fff;
	}

	.set-item .bottom .bottom-item>image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 4rpx;
	}

	.set-item .bottom .bottom-item>view:nth-child(2) {
		max-width: 200rpx;
		font-size: 24rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		text-align: center;
		margin: 10rpx 0;

	}

	.set-item .bottom .bottom-item>view:nth-child(3) {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.set-item .bottom .bottom-item>view:nth-child(3)>text:nth-child(1) {
		font-weight: bold;
	}

	.set-item .bottom .bottom-item>view:nth-child(3)>text:nth-child(2) {
		font-size: 22rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-left: 10rpx;
		line-height: 22rpx;

	}

	.region-cont {
		width: 100%;
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 8rpx 8rpx 0 0;
		height: 88rpx;
		justify-content: space-between;
	}

	.regin-item {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.regin-item .active{
		color: #f34930 !important;
	}

	.regin-item>view:nth-child(1) {
		font-size: 30rpx;
		color: #333333;
		margin-right: 10rpx;
	}

	.regin-item>view:nth-child(2) {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.regin-item>view:nth-child(2) image {
		width: 16rpx;
		height: 8rpx;
	}
	
	.regin-item>view:nth-child(2) image:nth-child(1){
		margin-bottom: 8rpx;
	}

	.goods-list {
		padding: 0 24rpx;
		width: 100%;
	}

	.goods-list .goods-item {
		width: 100%;
		background: #fff;
		height: 260rpx;
		border-radius: 8rpx;
		border: solid 1rpx #efefef;
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
		margin-bottom: 20rpx;
	}

	.goods-list .goods-item image {
		width: 220rpx;
		height: 220rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
		border: solid 1rpx #efefef;
	}

	.goods-list .goods-item>view {
		height: 215rpx;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
	}

	.goods-list .goods-item>view>view:nth-child(1) {
		font-size: 30rpx;
		color: #333333;
		line-height: 36rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		max-width: 420rpx;
	}

	.goods-list .goods-item>view>view:nth-child(2) {
		font-size: 24rpx;
		line-height: 30rpx;
		letter-spacing: 1rpx;
		color: #333;
	}

	.goods-list .goods-item>view>view:nth-child(3) {
		display: flex;
		flex-direction: column;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(1) {
		display: flex;
		align-items: center;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(1)>text {
		font-weight: bold;
		font-size: 28rpx;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(1)>text:last-child {
		text-decoration: line-through;
		margin-left: 10rpx;
		font-weight: normal;
		font-size: 24rpx;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(2) {
		border: solid 1rpx #f34930;
		background-color: #ffffff;
		border-radius: 4rpx;
		height: 100%;
		margin-top: 10rpx;
		display: flex;
		width: 210rpx;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(2)>text:nth-child(1) {
		display: inline-block;
		width: 100rpx;
		height: 100%;
		background-color: #f34930;
		border-radius: 4rpx 0rpx 0rpx 4rpx;
		font-size: 20rpx;
		color: #ffffff;
		text-align: center;
	}

	.goods-list .goods-item>view>view:nth-child(3)>view:nth-child(2)>text:nth-child(2) {
		padding: 0 10rpx;
		line-height: 32rpx;
		color: #f34930;
		font-size: 20rpx;
	}

	.distribution-centre-color {
		background-image: linear-gradient(-90deg,
			#f7b06e 0%,
			#f58353 43%,
			#f35638 100%);
	}

	.bottom-goods-list {
		background: #fff;
	}
</style>

<style>
	page {
		/* background: #fff; */
	}
</style>
